<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 806px;
            margin: 0 auto;
            overflow: hidden;
            margin-bottom: 10px;
        }

        #canvas,
        #video {
            float: left;
            margin-right: 10px;
            background: #fff;
        }

        #video {
            width: 400px;
            margin: 0 auto;
            border: 1px solid red;
        }

        #canvas {
            margin: 0 auto;
            border: 1px solid black;
        }

        #live,
        #snap {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <video id="video" width="400" height="300"></video>
        <canvas id="canvas"></canvas>
        <button id="live">相机</button>
        <button id="snap">拍照</button>
    </div>

    <script>
        alert("照相机，需要服务器打开");
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var width = video.width;
        var height = video.height;
        canvas.width = width;
        canvas.height = height;

        function liveVideo() {
            var URL = window.URL || window.webkitURL; // 获取到window.URL对象
            navigator.getUserMedia({
                video: true
            }, function (stream) {
                video.src = URL.createObjectURL(stream); // 将获取到的视频流对象转换为地址
                video.play(); // 播放
                //点击截图     
                document.getElementById("snap").addEventListener('click', function () {
                    ctx.drawImage(video, 0, 0, width, height);
                    var url = canvas.toDataURL('image/png');
                    // document.getElementById('download').href = url;
                });
            }, function (error) {
                console.log(error.name || error);
            });
        }
        document.getElementById("live").addEventListener('click', function () {
            liveVideo();
        });
    </script>
</body>

</html>